<template>
	<div ref="pieBox" style="width: 100%; height: 100%"></div>
</template>

<script setup>
	import * as echarts from "echarts";
	import {
		ref,
		onMounted,
		watch
	} from "vue";

	const pieBox = ref(null);
	const option = ref(null);
	let myChart = null;

	const myProps = defineProps({
		//数据
		piedata: {
			type: Array,
			required: true,
		},
	});

	//监听数据的变化
	watch(
		() => option.value,
		(newvalue, oldvalue) => {
			myChart.setOption(option.value);
		}, {
			deep: true,
		}
	);

	onMounted(() => {
		myChart = echarts.init(pieBox.value, 'dark', {
			renderer: 'canvas',
			useDirtyRect: false
		});
		var app = {};

		option.value = {
			backgroundColor:"#001432",
			title: {
				text: '空气质量指数级别分布',
				subtext: '',
				left: 'center',
				textStyle: {
					fontSize: "14px",
				},
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				left: 'left',
				top:'bottom'
			},
			series: [{
				name: '空气质量指数级别分布',//鼠标接触饼图显示的文字
				type: 'pie',
				radius: '50%',
				data: myProps.piedata,
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		};
		
		if (option.value && typeof option.value === 'object') {
			myChart.setOption(option.value);
		}
		
		window.addEventListener('resize', myChart.resize);
	});
	
	
</script>

<style>
</style>
